<!DOCTYPE html>
<html lang="{{ @LANGUAGE }}">
<head>
    <include href="blocks/head.html" />
    <link rel="stylesheet" href="{{ @BASE }}/css/taskboard.css">
    <set columnwidth="160" />
    <check if="{{ !empty(@taskboard[0]) }}">
        <style type="text/css">
        /* Size columns at multiples of @columnwidth ({{ @columnwidth }}px) */
{~ foreach(@statuses as @key=>@value): ~}
        #taskboard table .column-{{ @key + 1 }} {
            width: {{ @value.taskboard * @columnwidth }}px;
        }
{~ endforeach; ~}

        #taskboard table {
            width: {{ @column_count * $columnwidth + 252 }}px;
            table-layout: fixed;
        }

        /* Reference images within <base> context */
        #taskboard .completed .spinner {
            background-image: url({{ @BASE }}/img/taskboard/burn.gif);
        }
        #taskboard .spinner {
            background-image: url({{ @BASE }}/img/ajax-loader.gif);
        }

        #burndown-modal .modal-body {
            position: relative;
        }
        #burndown-modal .modal-body[data-loading]::after {
            content: attr(data-loading);
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            text-align: center;
            font-size: 28px;
            opacity: 0.4;
        }
        </style>
    </check>
    <!--[if lte IE 9]>
        <style type="text/css">
            /*  Fix RGBA issues */
            #taskboard .card {
                color: #000000;
                background-color: #ffffff;
            }
        </style>
    <![endif]-->
</head>
<body>
    <set fullwidth="{{ true }}" />
    <include href="blocks/navbar.html" />
    <section id="taskboard">
        <div class="floating-buttons">
            <div class="btn-group" role="navigation">
                <check if="{{ @prevSprint }}">
                    <true>
                        <a href="{{ @BASE }}/taskboard/{{ @prevSprint.id }}/{{ @filter }}" class="btn btn-default btn-xs" title="Previous Sprint">
                            ◀
                        </a>
                    </true>
                    <false>
                        <span class="btn btn-default btn-xs disabled" title="Previous Sprint">
                            ◀
                        </span>
                    </false>
                </check>
                <a href="{{ @BASE }}/taskboard/0/{{ @filter }}" class="btn btn-default btn-xs" title="Current Sprint">
                    📅
                </a>
                <check if="{{ @nextSprint }}">
                    <true>
                        <a href="{{ @BASE }}/taskboard/{{ @nextSprint.id }}/{{ @filter }}" class="btn btn-default btn-xs" title="Next Sprint">
                            ▶
                        </a>
                    </true>
                    <false>
                        <span class="btn btn-default btn-xs disabled" title="Next Sprint">
                            ▶
                        </span>
                    </false>
                </check>
            </div>
        </div>
        <table class="taskboard-head">
            <tr class="tb-row">
                <th class="column column-1">
                    <div class="btn-group">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                                <span class="fa fa-filter"></span> {{ @dict.groups }} <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li class="{{ @filter == 'all' ? 'active' : '' }}"><a href="{{ @BASE }}/taskboard/{{ @PARAMS.id ?? 0 }}/all">{{ @dict.all_tasks }}</a></li>
                                <li class="{{ @filter == 'groups' ? 'active' : '' }}"><a href="{{ @BASE }}/taskboard/{{ @PARAMS.id ?? 0 }}/groups">{{ @dict.my_groups }}</a></li>
                                <li class="{{ @filter == 'me' ? 'active' : '' }}"><a href="{{ @BASE }}/taskboard/{{ @PARAMS.id ?? 0 }}/me">{{ @dict.my_tasks }}</a></li>
                                <check if="{{ count(@groups) }}">
                                    <li class="divider"></li>
                                    <repeat group="{{ @groups }}" value="{{ @group }}">
                                        <li class="{{ @group.id == @filter ? 'active' : '' }}"><a href="{{ @BASE }}/taskboard/{{ @PARAMS.id ?? 0 }}/{{ @group.id }}">{{ @group.name | esc }}</a></li>
                                    </repeat>
                                </check>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                                {{ @dict.cols.type }} <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <F3:repeat group="{{ @project_types }}" value="{{ @type }}">
                                    {~
                                        @active = in_array(@type.id, @type_ids);
                                        if (@active) {
                                            @idStr = implode(',', array_diff(@type_ids, [@type.id]));
                                        } else {
                                            if (@GET.type_id) {
                                                @idStr = implode(',', array_unique(array_merge([@type.id], @type_ids)));
                                            } else {
                                                @idStr = @type.id;
                                            }
                                        }
                                        if (@idStr) {
                                            @query = http_build_query(array_merge(@GET, ['type_id' => @idStr]));
                                        } else {
                                            @query = http_build_query(['group_id' => @GET.group_id ?? null]);
                                        }
                                    ~}
                                    <li class="{{ @active ? 'active' : '' }}">
                                        <a href="{{ @BASE }}/taskboard/{{ @PARAMS.id ?? 0 }}/{{ @filter ? @filter . '/' : '' }}{{ @query ? '?' . @query : '' | esc }}">
                                            {{ isset(@dict[@type.name]) ? @dict[@type.name] : str_replace('_', ' ', @type.name) }}
                                        </a>
                                    </li>
                                </F3:repeat>
                            </ul>
                        </div>
                    </div>
                    <check if="{{ @@filterGroup }}">
                        <button type="button" id="btn-burndown" class="btn btn-default btn-xs" data-toggle="modal" data-target="#burndown-modal">
                            <span class="fa fa-fire"></span> {{ @dict.burndown }}
                        </button>
                    </check>
                </th>
                <repeat group="{{ @statuses }}" key="{{ @key }}" value="{{ @value }}">
                    <th class="column column-{{ @key + 1 }}">{{ isset(@dict[@value.name]) ? @dict[@value.name] : str_replace('_', ' ', @value.name) }}</th>
                </repeat>
            </tr>
        </table>
        <table id="task-table">
            <repeat group="{{ @taskboard }}" value="{{ @row }}">
                <tr data-story-id="{{ @row.project.id }}" class="tb-row">
                    <td class="column column-1">
                        <div id="project_{{ @row.project.id }}" class="card story {{ @row.project.status_closed ? 'completed' : '' }}" style="border-color: #{{ @row.project.owner_task_color | esc }};">
                            <div class="top">
                                <a href="{{ @BASE }}/issues/new/{{ @issue_type.task }}/{{ @row.project.id }}" title="Add Task" class="add-task has-tooltip pull-right" data-placement="right">
                                    <span class="fa fa-plus"></span>
                                </a>
                                <span class="owner">
                                    <check if="{{ @row.project.owner_username }}">
                                        <true>
                                            <a href="{{ @BASE }}/user/{{ @row.project.owner_username }}" target="_blank">{{ @row.project.owner_name | esc }}</a>
                                        </true>
                                        <false>
                                            {{ @row.project.owner_name | esc }}
                                        </false>
                                    </check>
                                </span>
                                <span class="task-id">
                                    <a href="{{ @BASE }}/issues/{{ @row.project.id }}" target="_blank">{{ @row.project.id }}</a>
                                </span>

                                <span class="task-dueDate">{{ empty(@row.project.due_date) ? "" : date('n/j', strtotime(@row.project.due_date)) }}</span>
                            </div>
                            <div class="title">{{ @row.project.name | esc }}
                                <check if="{{ @row.project.size_estimate }}">
                                 - {{ @row.project.size_estimate }}
                                </check>
                            </div>
                            <div class="type">
                                <check if="{{ @row.project.type_id == @issue_type.project }}">
                                    <true>
                                        {{ @row.project.parent_id ? @dict.subproject : @dict.project }}
                                    </true>
                                    <false>
                                        {{ @row.project.type_name }}
                                    </false>
                                </check>
                            </div>
                        </div>
                    </td>
                    <repeat group="{{ @row.columns }}" key="{{ @status_id }}" value="{{ @col }}">
                        <td class="column column-{{ @status_id + 1 }} {{ @statuses[@status_id]['closed'] ? 'completed' : '' }} droppable" data-status="{{ @status_id }}">
                            <repeat group="{{ @col }}" value="{{ @task }}">
                                <div class="card task well has-popover" id="task_{{ @task.id }}" data-id="{{ @task.id }}" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="auto bottom" data-container="body" data-content="<strong>{{ @dict.cols.author }}: </strong>{{ @task.author_name | esc }}<br><strong>{{ @dict.cols.description | esc }}: </strong> {{ strlen(@task.description) > 320 ? substr(@task.description, 0, 300) . ' [...]' : @task.description | esc }}" style="border-color: #{{ @task.owner_task_color | esc }};">
                                    <div class="hidden repeat_cycle">{{ @task.repeat_cycle }}</div>
                                    <div class="hours">{{ @task.hours_remaining ? @task.hours_remaining : '' }}</div>
                                    <div class="top">
                                        <span class="task-id"><a href="{{ @BASE }}/issues/{{ @task.id }}" target="_blank">{{ @task.id }}</a></span>
                                        <span class="task-dueDate">{{ empty(@task.due_date) ? "" : date('n/j', strtotime(@task.due_date)) }}</span>
                                    </div>
                                    <div class="title">{{ @task.name | esc }}</div>
                                    <div class="description">{{ @task.description | esc }}</div>
                                    <check if="{{ !empty(@task.due_date) && strtotime(@task.due_date) > 0 }}">
                                        <true>
                                            <div class="dueDate">{{ date('n/j/Y', strtotime(@task.due_date)) }}</div>
                                        </true>
                                        <false>
                                            <div class="dueDate"></div>
                                        </false>
                                    </check>
                                    <check if="{{ @task.priority == 0 }}">
                                        <true>
                                            <div class="priority normal" data-val="{{ @task.priority }}">{{ isset(@dict[@task.priority_name]) ? @dict[@task.priority_name] : str_replace('_', ' ', @task.priority_name) }}</div>
                                        </true>
                                        <false>
                                            <check if="{{ @task.priority < 0 }}">
                                                <true>
                                                    <div class="priority low" data-val="{{ @task.priority }}">{{ isset(@dict[@task.priority_name]) ? @dict[@task.priority_name] : str_replace('_', ' ', @task.priority_name) }}</div>
                                                </true>
                                                <false>
                                                    <div class="priority high" data-val="{{ @task.priority }}">{{ isset(@dict[@task.priority_name]) ? @dict[@task.priority_name] : str_replace('_', ' ', @task.priority_name) }}</div>
                                                </false>
                                            </check>
                                        </false>
                                    </check>
                                    <div class="owner" data-id="{{ @task.owner_id }}">
                                        <check if="{{ @task.owner_username }}">
                                            <true>
                                                <a href="{{ @BASE }}/user/{{ @task.owner_username }}" target="_blank">{{ @task.owner_name | esc }}</a>
                                            </true>
                                            <false>
                                                {{ @task.owner_name | esc }}
                                            </false>
                                        </check>
                                    </div>
                                </div>
                            </repeat>
                        </td>
                    </repeat>
                </tr>
            </repeat>
        </table>
    </section>
    <div class="card task cloneable" id="new_task">
        <div class="hidden repeat_cycle"></div>
        <div class="hours"></div><div class="top">
            <span class="task-id"></span>
        </div>
        <div class="title"></div>
        <div class="description"></div>
        <div class="dueDate"></div>
        <div class="priority normal"></div>
        <div class="owner"></div>
    </div>
    <div class="container-fluid">
        <include href="blocks/footer.html" />
    </div>

    <!-- Add/Edit Task Modal -->
    <div class="modal" id="task-dialog" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="#task-dialog-title">
        <div class="modal-dialog">
            <form class="modal-content" method="post">
                <csrf-token />
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">{{ @dict.close }}</span></button>
                    <h4 class="modal-title" id="task-dialog-title">{{ @dict.edit }}</h4>
                </div>
                <fieldset class="modal-body">
                    <input type="hidden" name="sprintId" id="sprintId" value="{{ @sprint.id }}">
                    <input type="hidden" name="taskId" id="taskId" value="">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="form-group">
                                    <label for="title">{{ @dict.cols.title }}</label>
                                    <input type="text" name="title" id="title" class="form-control input-sm" required autofocus>
                                </div>
                                <div class="form-group">
                                    <label for="description">{{ @dict.cols.description }}</label>
                                    <textarea name="description" id="description" class="form-control input-sm" rows="12"></textarea>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="form-group">
                                    <label for="assigned">{{ @dict.cols.assignee }}</label>
                                    <select id="assigned" name="assigned" class="form-control input-sm" onchange="Taskboard.changeUser(this)" data-default-value="{{ @user.id }}" data-default-color="#{{ @user.task_color }}">
                                        <option value="0" data-color="#AAAAAA">{{ @dict.not_assigned }}</option>
                                        <option value="{{ @user.id }}" data-color="#{{ @user.task_color }}" selected>{{ @user.name | esc }}</option>
                                        <optgroup label="Groups">
                                            <repeat group="{{ @groups }}" value="{{ @group }}">
                                                <option value="{{ @group.id }}" data-color="#{{ @group.task_color }}">{{ @group.name | esc }}</option>
                                            </repeat>
                                        </optgroup>
                                        <optgroup label="Users">
                                            <repeat group="{{ @users }}" value="{{ @user }}">
                                                <option value="{{ @user.id }}" data-color="#{{ @user.task_color }}" data-username="{{ @user.username }}">{{ @user.name | esc }}</option>
                                            </repeat>
                                        </optgroup>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="hours">{{ @dict.cols.hours_remaining }}</label>
                                    <input type="number" name="hours" id="hours" class="form-control input-sm" min="0" step="any">
                                </div>
                                <div class="form-group">
                                    <label for="dueDate">{{ @dict.cols.due_date }}</label>
                                    <input type="text" name="dueDate" id="dueDate" value="" class="dueDate form-control input-sm">
                                </div>
                                <div class="form-group">
                                    <label for="repeat_cycle">{{ @dict.cols.repeat_cycle }}</label>
                                    <div>
                                        <select class="form-control input-sm" id="repeat_cycle" name="repeat_cycle">
                                            <option value="">{{ @dict.not_repeating }}</option>
                                            <option value="daily" {{ !empty(@issue) && @issue.repeat_cycle == 'daily' ? "selected" : "" }}>{{ @dict.daily }}</option>
                                            <option value="weekly" {{ !empty(@issue) && @issue.repeat_cycle == 'weekly' ? "selected" : "" }}>{{ @dict.weekly }}</option>
                                            <option value="monthly" {{ !empty(@issue) && @issue.repeat_cycle == 'monthly' ? "selected" : "" }}>{{ @dict.monthly }}</option>
                                            <option value="quarterly" {{ !empty(@issue) && @issue.repeat_cycle == 'quarterly' ? "selected" : "" }}>{{ @dict.quarterly }}</option>
                                            <option value="semi_annually" {{ !empty(@issue) && @issue.repeat_cycle == 'semi_annually' ? "selected" : "" }}>{{ @dict.semi_annually }}</option>
                                            <option value="annually" {{ !empty(@issue) && @issue.repeat_cycle == 'annually' ? "selected" : "" }}>{{ @dict.annually }}</option>
                                            <option value="sprint" {{ !empty(@issue) && @issue.repeat_cycle == 'sprint' ? "selected" : "" }}>{{ @dict.sprint }}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="priority">{{ @dict.cols.priority }}</label>
                                    <select id="priority" name="priority" class="form-control input-sm" onchange="Taskboard.changeModalPriority($(this).find('option:selected').val())">
                                        <repeat group="{{ @priorities }}" value="{{ @priority }}">
                                            <option value="{{ @priority.value }}">{{ isset(@dict[@priority.name]) ? @dict[@priority.name] : str_replace('_', ' ', @priority.name) | esc }}</option>
                                        </repeat>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <hr>
                                <div class="form-inline">
                                    <label>{{ @dict.track_time_spent }}</label><br>
                                    <div class="form-group form-group-wide">
                                        <label class="sr-only" for="comment">{{ @dict.comment }}</label>
                                        <input type="text" name="comment" id="comment" class="form-control input-sm" placeholder="{{ @dict.comment }}">
                                    </div>
                                    <div class="form-group form-group-narrow">
                                        <label class="sr-only" for="hours_spent">{{ @dict.cols.hours_spent }}</label>
                                        <input type="text" name="hours_spent" id="hours_spent" class="form-control input-sm" placeholder="{{ @dict.cols.hours_spent }}">
                                    </div>
                                    <div class="checkbox">
                                        &nbsp;
                                        <label>
                                            <input type="checkbox" name="burndown" id="input-burndown" value="1" checked> {{ @dict.burn_hours }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">{{ @dict.cancel }}</button>
                    <button type="submit" class="btn btn-sm btn-primary">{{ @dict.save }}</button>
                </div>
            </form>
        </div>
    </div>

    <check if="{{ @@filterGroup }}">
        <div class="modal fade" id="burndown-modal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">{{ @dict.close }}</span>
                        </button>
                        <form class="form-inline pull-right" id="frm-man-hours" style="margin-top: -5px;">
                            <input type="hidden" name="user_id" value="{{ @filterGroup->id }}">
                            <label class="control-label input-sm">{{ @dict.man_hours }}</label>
                            <span class="does-toggle man-hours">{{ @filterGroup->option('man_hours') }}</span>
                            &nbsp;
                            <a class="fa fa-edit does-toggle" href="#input-man-hours"></a>
                            <input type="number" style="width: 80px;" class="form-control input-sm hidden" name="man_hours" id="input-man-hours" value="{{ @filterGroup->option('man_hours') }}">
                            &emsp;
                        </form>
                        <h4 class="modal-title">{{ @dict.burndown }}</h4>
                    </div>
                    <div class="modal-body" data-loading="{{ @dict.loading }}">
                        <canvas id="burndown" width="850" height="320"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </check>

    <script src="{{ @BASE }}/js/jquery-ui-dragsort.min.js"></script>
    <script src="{{ @BASE }}/js/jquery.ui.touch-punch.min.js"></script>
    <script src="{{ @BASE }}/js/bootstrap-datepicker.js"></script>
    <check if="{{ @user_obj->date_picker()->js && @user_obj->date_picker()->language != 'en-US' }}">
        <script src="{{ @BASE }}/js/bootstrap-datepicker.{{ @user_obj->date_picker()->language }}.min.js"></script>
    </check>
    <script>
        var datepickerLanguage='{{ @user_obj->date_picker()->language }}';
        $(document).ready(function() {

            // Taskboard header horizontal scrolling
            $(window).scroll(function(e) {
                var left = $(this).scrollLeft();
                $(".taskboard-head").css("left", (0 - left) + 'px');
            });

            // Trigger scroll handler on ready (in case user refreshed after scrolling)
            $(window).scroll();

        });
        // Every time a modal is shown, if it has an autofocus element, focus on it.
        $('.modal').on('shown.bs.modal', function() {
            $(this).find('[autofocus]').focus();
        });
    </script>
    <check if="{{ @@filterGroup }}">
        <true>
            <script>
                var BurndownUrl = BASE + '/taskboard/{{ @sprint.id }}/burndown/{{ @filter }}',
                    BurndownLegendDict = {
                        hours_remaining: '{{ @dict.hours_remaining }}',
                        man_hours_remaining: '{{ @dict.man_hours_remaining }}',
                    },
                    BurndownManHours = parseFloat('{{ @filterGroup->option("man_hours") }}'),
                    BurndownRange = {
                        start: '{{ @sprint->getFirstWeekday() }} 00:00:00',
                        end: '{{ @sprint->getLastWeekday() }} 23:59:59'
                    };
            </script>
            <script src="{{ @BASE }}/js/chart.min.js"></script>
            <script src="{{ @BASE }}/js/taskboard.js"></script>
            <script src="{{ @BASE }}/js/burndown.js"></script>
            <script>
                $(document).ready(function() {
                    $("#burndown-modal").on("shown.bs.modal", function(e) {
                        if(Burndown.initialized === false) {
                            Burndown.init('burndown', BurndownUrl);
                        }
                    });
                    $("#burndown-modal .fa-edit").click(function(e) {
                        e.preventDefault();
                        $('#input-man-hours, #burndown-modal .does-toggle').toggleClass('hidden');
                        $('#input-man-hours').focus().select();
                    });
                    $("#frm-man-hours").submit(function(e) {
                        e.preventDefault();
                        $.post(BASE + '/taskboard/saveManHours', $(this).serialize()).fail(function() {
                            showAlert('Failed to save new sprint assignment');
                        });
                        BurndownManHours = $('#input-man-hours').val();
                        $("#burndown-modal .man-hours").text(BurndownManHours);
                        $('#input-man-hours, #burndown-modal .does-toggle').toggleClass('hidden');
                        Burndown.chart.data.datasets[1].data[0].y = BurndownManHours;
                        Burndown.chart.update();
                    });
                });
            </script>
        </true>
        <false>
            <script src="{{ @BASE }}/js/taskboard.js"></script>
        </false>
    </check>
</body>
</html>
